<template>
	<view class="HMfilterDropdown" :class="{'setDropdownBottom':maskVisibility}" @touchmove.stop.prevent="discard"
		@tap.stop="discard" :style="{'top':menuTop+'rpx'}">
		<view class="nav">
			<block v-for="(item,index) in menu" :key="index">
				<view class="first-menu" :class="{'on':showPage==index}" @tap="togglePage(index)">
					<text class="name">{{item.name}}</text>
					<text class="iconfont triangle" :style="'transform:rotate('+triangleDeg[index]+'deg);'"></text>
				</view>
			</block>
		</view>
		<view class="mask" :class="{'show':isShowMask,'hide':maskVisibility!=true}" @tap="togglePage(showPage)"></view>

		<block v-for="(page,page_index) in subData" :key="page_index">
			<view class="sub-menu-class" :class="{'show':showPage==page_index,'hide':pageState[page_index]!=true}">
				<!-- 排序 -->
				<block v-if="page.type=='single'">
					<scroll-view class="sub-menu-list alone" :scroll-y="true">
						<block v-for="(sub,index) in page.submenu" :key="index">
							<view class="sub-menu" :class="filtParams.filter_sort ==sub.value?'on':''"
								@tap="onSort(sub.value)">
								<view class="menu-name">
									<text>{{sub.name}}</text>
									<text class="iconfont selected"></text>
								</view>
							</view>
						</block>
					</scroll-view>
				</block>
				<!-- 商标分类 -->
				<block v-if="page.type=='filter'">
					<view class="filter">
						<scroll-view class="menu-box" :scroll-y="true">
							<!-- 商标分类 -->
							<view class="box" v-for="(box,box_index) in page.submenu" :key="box_index">
								<view class="title">{{box.name}}</view>
								<view class="labels  classify_filter">
									<view v-for="(label,label_index) in box.submenu" :key="label_index"
										@tap="selectFilterLabel(page_index,box_index,label_index,label.value)"
										:class="{'on':label.selected}">{{label.name}}</view>
								</view>
							</view>
							<!-- 群组选择 -->
							<!-- <view class="box" v-if="groupArr.length !=0">
								<view class="title">群组选择</view>
								<view class="labels  classify_filter" v-for="(group_item,group_index) in groupArr"
									:key="group_index">
									<view v-for="(list_item,list_index) in group_item.list" :key="list_index"
										@tap="selectFilterLabel2(page_index,group_item,group_index,list_item,list_index)"
										:class="{'on':list_item.selected}">{{list_item.value}}</view>
								</view>
							</view> -->
						</scroll-view>
						<view class="btn-box">
							<button class="reset" type="default" @tap="resetFilterData(page_index)">重置</button>
							<button class="confirm" type="primary" @tap="setFilterData(page_index)">确定</button>
						</view>
					</view>
				</block>
				<!-- 价格 -->
				<block v-if="page.type=='progress'">
					<view class="filter progress">
						<view class="menu-box">
							<view class="box">
								<view class="price-box">
									<view class="min">
										<view class="tag">最低价</view>
										<input class="uni-input" type="number" v-model="filtParams[page.value][0]" />
									</view>
									<view class="max">
										<view class="tag">最高价</view>
										<input class="uni-input" type="number" v-model="filtParams[page.value][1]" />
									</view>
								</view>
							</view>
						</view>
						<view class="btn-box">
							<button class="reset" type="default" @tap="resetPrice">重置</button>
							<button class="confirm" type="primary" @tap="confirmPrice">确定</button>
						</view>
					</view>
				</block>
				<!-- 筛选 -->
				<block v-if="page.type=='hierarchy'&& page.submenu.length>0">
					<view class="filter">
						<view class="menu-box filt">
							<scroll-view class="sub-menu-list first" :scroll-y="true">
								<block v-for="(sub,index) in page.submenu" :key="index">
									<view class="sub-menu" :class="{'on':index===filtIndex}"
										@tap="onFiltMenu(page_index,index,null,null)">
										<view class="menu-name">
											<text>{{sub.name}}</text>
											<text class="iconfont selected"></text>
										</view>
									</view>
								</block>
							</scroll-view>
							<block v-for="(sub,index) in page.submenu" :key="index">
								<scroll-view class="sub-menu-list not-first" :scroll-y="true"
									v-if="filtIndex==index&&sub.submenu.length>0"
									:scroll-into-view="'second_id'+secondScrollInto">
									<block v-for="(sub_second,second_index) in sub.submenu" :key="second_index">
										<view class="sub-menu" :id="'second_id'+second_index"
											:class="{'on':filtParams[sub.value]==sub_second.value}">
											<view class="menu-name" @click="onFiltTap(sub.value,sub_second.value)">
												<text>{{sub_second.name}}</text>
												<text class="iconfont selected"></text>
											</view>
										</view>
									</block>
								</scroll-view>
							</block>
						</view>
						<view class="btn-box">
							<button class="reset" type="default" @tap="resetFilt">重置</button>
							<button class="confirm" type="primary" @tap="hideFilt">确定</button>
						</view>
					</view>
				</block>

			</view>
		</block>
	</view>
</template>
<script>
	import log from '../../utils/log';
	export default {
		menuTop: {
			value: Number,
			default: false
		},
		data() {
			return {
				categoryArr: [],
				categoryArr2: [],
				groupArr: [],
				subData: [], //菜单数据
				menu: [], //顶部横条数据
				showPage: -1, //菜单页面显示/隐藏动画控制
				pageState: [], //页面的状态
				activeMenuArr: [
					[],
					[],
					[],
					[0]
				], //UI状态
				shadowActiveMenuArr: [], //记录选中
				defaultActive: [],
				triangleDeg: [], //小三角形的翻转动画控制
				isShowMask: false, //遮罩层显示/隐藏动画控制
				maskVisibility: false, //遮罩层显示/隐藏状态
				//滚动区域定位
				firstScrollInto: 0,
				secondScrollInto: 0,
				componentTop: 0, //组件top
				isReadNewSelect: false,
				filtParams: {
					// sort: '',
					// price: [0, 99999999999],
					// category:[],
					// regtype:'',
					// strlen:'',
					// regtime:'',
				},
				filtIndex: 0,
				isaaa: true,
			}
		},

		props: {
			menuTop: {
				value: Number,
				default: false
			},
			filterData: {
				value: Array,
				default: []
			},
			defaultSelected: {
				value: Object,
				default: {}
			},
			updateMenuName: {
				value: Boolean,
				default: true
			},
			dataFormat: {
				value: String,
				default: 'Array'
			},
			typeSubmenu: {
				value: Array,
				default: []
			},
			groupSubmenu: {
				value: Array,
				default: []
			},
		},
		mounted() {
			this.filtParams = this.defaultSelected
		},
		watch: {
			filterData: {
				handler() {
					this.initMenu(); //filterData重新赋值初始化菜单
				},
				immediate: true
			},
		},
		methods: {
			format(val) {
				return '￥' + val
			},
			initMenu() {
				let tmpMenuActiveArr = [];
				let tmpMenu = [];
				console.log("this.filterData", this.filterData)
				for (let i = 0; i < this.filterData.length; i++) {
					let tmpitem = this.filterData[i];
					tmpMenu.push({
						//如果没有设置name，则取第一个菜单作为menu.name
						name: tmpitem.name || tmpitem.submenu[0].name,
						type: tmpitem.type
					});
					//初始化选中项数组-ui状态
					tmpMenuActiveArr.push(this.processActive(tmpitem));
					//初始化角度数组
					this.triangleDeg.push(0);
					//初始化控制显示状态数组
					this.pageState.push(false);
					//递归处理子菜单数据
					tmpitem = this.processSubMenu(tmpitem);
					this.filterData[i] = tmpitem;
				}
				this.menu = tmpMenu;
				//初始化选中项数组
				tmpMenuActiveArr = this.defaultActive.length > 0 ? this.defaultActive : this.activeMenuArr.length > 0 ?
					this.activeMenuArr : tmpMenuActiveArr;
				this.defaultActive = [];
				this.activeMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr));
				this.shadowActiveMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr));
				//加载菜单数据
				this.subData = this.filterData;
			},
			resetPrice() {
				this.filtParams.filter_price = [0, 99999999999];
				this.search();
				this.hideFilt();
			},
			confirmPrice() {
				if (this.filtParams.filter_price[0] === '') {
					uni.showToast({
						title: '请输入最低价',
						icon: 'none'
					});
					this.filtParams.filter_price = [0, 99999999999];
					return;
				}
				if (this.filtParams.filter_price[1] === '') {
					uni.showToast({
						title: '请输入最高价',
						icon: 'none'
					});
					this.filtParams.filter_price = [0, 999];
					return;
				}
				if (this.filtParams.filter_price[0] > this.filtParams.filter_price[1]) {
					uni.showToast({
						title: '最高价不能低于最低价',
						icon: 'none'
					});
					this.filtParams.filter_price = [0, 999];
					return;
				}
				this.search();
				this.hideFilt();
			},
			resetCollect() {
				this.filtParams.filter_collect = '';
				this.search();
			},
			resetFilt() {
				Object.keys(this.filtParams).forEach(i => {
					if (i !== 'filter_sort' && i !== 'filter_price' && i !== 'filter_type') {
						this.filtParams[i] = '';
					}
				});
				this.search();
			},
			//重置多选
			resetFilterData(page_index) {
				let level = this.shadowActiveMenuArr[page_index].length;
				let box = this.subData[page_index].submenu[level - 1].submenu;
				for (let i = 0; i < box.length; i++) {
					this.subData[page_index].submenu[level - 1].submenu[i].selected = false;
				}
				this.categoryArr = [];
				this.$forceUpdate();
			},
			hideFilt() {
				this.hidePageLayer(true);
				this.hideMask();
				this.showPage = -1;
			},
			//排序点击
			onSort(value, page_value) {
				this.filtParams.filter_sort = value;
				this.hideFilt();
				this.search();
			},
			// 点击状态
			onStatus(value) {
				this.filtParams.filter_status = value;
				// console.log(this.filtParams.status);
				this.hideFilt();
				this.search();
			},
			//点击申请年限
			onYeas(value) {
				this.filtParams.filter_year = value;
				// console.log(this.filtParams.apply_date);
				this.hideFilt();
				this.search();
			},
			//点击申请人类型
			onApplicant(value) {
				this.filtParams.filter_apply_type = value;
				this.hideFilt();
				this.search();
			},
			//点击小项不少于
			onEvent(value) {
				this.filtParams.filter_event = value;
				this.hideFilt();
				this.search();
			},
			//点击活跃度
			onActivation(value) {
				this.filtParams.filter_activation = value;
				this.hideFilt();
				this.search();
			},
			//点击注册人申请量
			onRegistrant(value) {
				this.filtParams.filter_registrant = value;
				this.hideFilt();
				this.search();
			},
			setPrice() {
				// console.log('asdasd')
			},
			//收藏夹点击
			onCollect(value) {
				this.filtParams.filter_collect = value
				this.hideFilt();
				this.search();
			},
			//多选
			selectFilterLabel(page_index, box_index, label_index, label_value) {
				let find_index = this.activeMenuArr[page_index][box_index].indexOf(label_index);
				if (find_index > -1) {
					this.activeMenuArr[page_index][box_index].splice(find_index, 1);
					this.categoryArr.splice(this.categoryArr.indexOf(label_value), 1);
					this.subData[page_index].submenu[box_index].submenu[label_index].selected = false;
				} else {
					this.activeMenuArr[page_index][box_index].push(label_index);
					this.categoryArr.push(label_value);
					this.subData[page_index].submenu[box_index].submenu[label_index].selected = true;
				}
				if (box_index == 0) {
					// this.subData[page_index].submenu[box_index].submenu[label_index] = this.groupSubmenu; 
					this.subData[page_index].submenu[box_index].submenu[label_index] = this.groupSubmenu.filter(item =>
						this.categoryArr.includes(item.type_id));
				}
				// this.groupArr = this.subData[1].son_category.submenu.filter(item => this.categoryArr.includes(item
				// 	.type_id));
				this.$forceUpdate();
			},
			// //多选
			// selectFilterLabel(page_index, box_index, label_index, label_value) {
			// 	let find_index = this.activeMenuArr[page_index][box_index].indexOf(label_index);
			// 	// 选中 -1  取消0
			// 	if (find_index > -1) {
			// 		this.activeMenuArr[page_index][box_index].splice(find_index, 1);
			// 		this.categoryArr.splice(this.categoryArr.indexOf(label_value), 1);
			// 		this.subData[page_index].submenu[box_index].submenu[label_index].selected = false;
			// 	} else {
			// 		this.activeMenuArr[page_index][box_index].push(label_index);
			// 		this.categoryArr.push(label_value);
			// 		this.subData[page_index].submenu[box_index].submenu[label_index].selected = true;
			// 	}
			// 	this.subData[1].son_category.submenu = this.groupSubmenu;
			// 	this.groupArr = this.subData[1].son_category.submenu.filter(item => this.categoryArr.includes(item
			// 		.type_id));
			// 	this.$forceUpdate();
			// },
			//群组选择 多选 
			selectFilterLabel2(page_index, group_item, group_index, list_item, list_index) {
				if (this.activeMenuArr[1].length < 2) {
					this.activeMenuArr[1].push([]);
				}
				//选中 -1  取消0
				let find_index = this.activeMenuArr[1][1].indexOf(list_index) || 0;
				if (find_index > -1) {
					this.activeMenuArr[1][1].splice(find_index, 1);
					// this.categoryArr2.splice(this.categoryArr2.indexOf(list_item.value), 1);
					// this.subData[1].son_category.submenu[list_index].selected = false;
					this.groupArr[group_index].list[list_index].selected = false;
				} else {
					this.activeMenuArr[1][1].push(list_index);
					// this.categoryArr2.push(list_item.value);					
					this.groupArr[group_index].list[list_index].selected = true;
				}
				this.$forceUpdate();
			},
			//多选的值
			setFilterData(page_index) {
				this.shadowActiveMenuArr[page_index] = this.activeMenuArr[page_index];
				console.log("this.shadowActiveMenuArr[page_index]", this.shadowActiveMenuArr)
				this.togglePage(this.showPage);
				// this.filtParams.category = this.shadowActiveMenuArr[page_index].join(',');
				this.filtParams.filter_type = this.categoryArr.join(',');
				this.categoryArr2 = [];
				// 遍历 groupArr 中的所有子数组
				this.groupArr.forEach(group => {
					// 遍历每个子数组中的元素
					group.list.forEach(item => {
						// 如果 selected 为 true，则将 value 添加到 categoryArr2 中
						if (item.selected) {
							this.categoryArr2.push(item.value);
						}
					});
				});
				this.filtParams.group_type = this.categoryArr2.join(',');
				this.hideFilt();
				this.search();
			},
			//筛选菜单点击
			onFiltTap(key, value) {
				this.filtParams[key] = value;
				// console.log(key,value,this.filtParams)
				this.search();
			},
			//选中
			onFiltMenu(page_index, level1_index, level2_index, level3_index) {
				// console.log(page_index, level1_index, level2_index, level3_index)
				this.filtIndex = level1_index
				//读取记录
				if (level1_index != null && level2_index == null && level3_index == null && this.shadowActiveMenuArr[
						page_index][0] ==
					level1_index) {
					// console.log(1)
					this.activeMenuArr.splice(page_index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[
						page_index])));
				} else {
					// console.log(2)
					this.activeMenuArr[page_index].splice(0, 1, level1_index);
					(level2_index != null || this.activeMenuArr[page_index].length >= 2) && this.activeMenuArr[page_index]
						.splice(1, 1,
							level2_index) || this.activeMenuArr[page_index].splice(1, 1);
					(level3_index != null || this.activeMenuArr[page_index].length >= 3) && this.activeMenuArr[page_index]
						.splice(2, 1,
							level3_index) || this.activeMenuArr[page_index].splice(2, 1);
				}

			},

			//菜单开关
			togglePage(index) {
				if (index == this.showPage) {
					this.hidePageLayer(true);
					this.hideMask();
					this.showPage = -1;
					console.log('0')
				} else {
					if (this.showPage > -1) {
						this.hidePageLayer(false);
					}
					this.showPageLayer(index);
					this.showMask();
				}
			},
			//hide遮罩层
			hideMask() {
				this.isShowMask = false;
				setTimeout(() => {
					this.maskVisibility = false;
				}, 200);
			},
			//show遮罩层
			showMask() {
				this.maskVisibility = true;
				this.$nextTick(() => {
					setTimeout(() => {
						this.isShowMask = true;
					}, 0);
				})
			},
			//hide菜单页
			hidePageLayer(isAnimation) {
				this.triangleDeg[this.showPage] = 0;
				let tmpIndex = this.showPage;
				if (isAnimation) {
					setTimeout(() => {
						this.pageState.splice(tmpIndex, 1, false);
					}, 200);
					// this.confirm();
				} else {
					this.pageState.splice(tmpIndex, 1, false)
				}
				this.firstScrollInto = null;
				this.secondScrollInto = null;
			},
			search() {
				this.$emit('search', this.filtParams);
			},
			//show菜单页
			showPageLayer(index) {
				this.processPage(index);
				this.pageState.splice(index, 1, true);
				this.$nextTick(() => {
					setTimeout(() => {
						this.showPage = index;
					}, 0);
				})
				this.triangleDeg[index] = 180;
			},
			reloadActiveMenuArr() {
				for (let i = 0; i < this.filterData.length; i++) {
					let tmpitem = this.filterData[i];
					let tmpArr = this.processActive(tmpitem);
					tmpitem = this.processSubMenu(tmpitem);
					if (this.activeMenuArr[i].length != tmpArr.length) {
						this.filterData[i] = tmpitem;
						this.activeMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr)));
						this.shadowActiveMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr)));
					}
				}
				this.subData = this.filterData;
				this.$forceUpdate();
			},
			processPage(index) {
				//check UI控制数组，结果数组,防止传入数据层级和UI控制数组不同步
				this.reloadActiveMenuArr();
				//重置UI控制数组
				this.activeMenuArr.splice(index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[index])));
				if (this.menu[index].type == 'filter') {
					//重载筛选页选中状态
					let level = this.shadowActiveMenuArr[index].length;
					for (let i = 0; i < level; i++) {
						let box = this.subData[index].submenu[i].submenu;
						console.log("this.shadowActiveMenuArr", this.shadowActiveMenuArr)
						for (let j = 0; j < box.length; j++) {
							if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) {
								this.subData[index].submenu[i].submenu[j].selected = true;
							} else {
								this.subData[index].submenu[i].submenu[j].selected = false;
							}
						}
					}
				} else if (this.menu[index].type == 'hierarchy') {
					this.$nextTick(() => {
						setTimeout(() => {
							//滚动到选中项
							this.firstScrollInto = parseInt(this.activeMenuArr[index][0]);
							this.secondScrollInto = parseInt(this.activeMenuArr[index][1]);
						}, 0);
					})
				} else if (this.menu[index].type == 'radio') {
					//重载筛选页选中状态
					let level = this.shadowActiveMenuArr[index].length;
					for (let i = 0; i < level; i++) {
						let box = this.subData[index].submenu[i].submenu;
						for (let j = 0; j < box.length; j++) {
							if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) {
								this.subData[index].submenu[i].submenu[j].selected = true;
							} else {
								this.subData[index].submenu[i].submenu[j].selected = false;
							}
						}
					}
				}
			},
			processActive(tmpitem) {
				let tmpArr = []
				if (tmpitem.type == 'hierarchy' && tmpitem.hasOwnProperty('submenu') && tmpitem.submenu.length > 0) {
					let level = this.getMaxFloor(tmpitem.submenu);
					while (level > 0) {
						tmpArr.push(null);
						level--;
					}
				} else if (tmpitem.type == 'filter') {
					let level = tmpitem.submenu.length;
					while (level > 0) {
						tmpArr.push([]);
						level--;
					}
				} else if (tmpitem.type == 'radio') {
					let level = tmpitem.submenu.length;
					while (level > 0) {
						tmpArr.push([]);
						level--;
					}
				}
				return tmpArr;
			},
			processSubMenu(menu) {
				if (menu.hasOwnProperty('submenu') && menu.submenu.length > 0) {
					for (let i = 0; i < menu.submenu.length; i++) {
						menu.submenu[i] = this.processSubMenu(menu.submenu[i]);
					}
				} else {
					menu.submenu = [];
				}
				return menu;
			},
			//计算菜单层级
			getMaxFloor(treeData) {
				let floor = 0
				let max = 0

				function each(data, floor) {
					data.forEach(e => {
						max = floor > max ? floor : max;
						if (e.hasOwnProperty('submenu') && e.submenu.length > 0) {
							each(e.submenu, floor + 1)
						}
					})
				}
				each(treeData, 1)
				return max;
			},
			discard() {

			}
		}
	}
</script>
<style lang="scss">
	.HMfilterDropdown {
		flex-shrink: 0;
		width: 100%;
		position: fixed;
		transform: translateZ(0);
		// position: sticky;
		z-index: 15;
		flex-wrap: nowrap;
		display: flex;
		flex-direction: row;
		top: calc(var(--window-top) + 100upx);
		left: 0;
		// top:100px;
		overflow-y: hidden;

		&.setDropdownBottom {
			// height: 345px;
			bottom: 0;
		}

		view {
			display: flex;
			flex-wrap: nowrap;
		}
	}

	.region {
		flex: 1;
		height: 44px;
	}

	.nav {
		width: 100%;
		height: 44px;
		border-bottom: solid 1rpx #eee;
		z-index: 12;
		background-color: #ffffff;
		flex-direction: row;

		.first-menu {
			width: 100%;
			font-size: 15px;
			color: #333333;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			transition: color .2s linear;

			&.on {
				color: #ff4e1f;
				font-weight: bold;

				.iconfont {
					color: #ff4e1f;
				}
			}

			.name {
				height: 20px;
				text-align: center;
				text-overflow: clip;
				overflow: hidden;
			}

			.iconfont {
				font-size: 12px;
				margin-left: 5px;
				align-items: center;
				justify-content: center;
				transition: transform .3s linear, color .3s linear;
			}
		}
	}

	.sub-menu-class {
		width: 100%;
		position: absolute;
		left: 0;
		transform: translate3d(0, - 100%, 0);
		max-height: 345px;
		background-color: #ffffff;
		z-index: 11;
		box-shadow: 0 5px 5px rgba(0, 0, 0, .1);
		overflow: hidden;
		flex-direction: row;
		transition: transform .3s linear;

		&.hide {
			display: none;
		}

		&.show {
			transform: translate3d(0, calc(44px + 1rpx), 0);
		}
	}

	.sub-menu-list {
		width: 100%;
		// height: 345px;
		flex-direction: column;

		.sub-menu {
			min-height: 44px;
			font-size: 15px;
			flex-direction: column;
			padding-right: 15px;

			>.menu-name {
				height: 50px;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;

				>.iconfont {
					display: none;
					font-size: 18px;
					color: #ff4e1f;
				}
			}
		}

		&.first {
			flex-shrink: 0;
			width: 236rpx;
			background-color: #f0f0f0;

			.sub-menu {
				padding-left: 15px;

				&.on {
					background-color: #fff;
				}
			}
		}

		&.alone {
			max-height: 345px;
			min-height: 170px;
			height: auto;

			.sub-menu {
				min-height: calc(44px - 1rpx);
				margin-left: 25px;
				border-bottom: solid 1rpx #e5e5e5;

				&.on {
					color: #ff4e1f;

					>.menu-name {
						>.iconfont {
							display: block;
						}
					}
				}
			}
		}

		&.not-first {
			.sub-menu {
				min-height: calc(44px - 1rpx);
				margin-left: 15px;
				border-bottom: solid 1rpx #e5e5e5;

				>.menu-name {
					height: calc(44px - 1rpx);

					>.iconfont {
						display: none;
						font-size: 13px;
						color: #ff4e1f;
					}
				}

				&.on {
					color: #ff4e1f;

					>.menu-name {
						>.iconfont {
							display: block;
						}
					}
				}

				.more-sub-menu {
					flex-direction: row;
					flex-wrap: wrap;
					padding-bottom: 9px;

					>text {
						height: 40px;
						border-radius: 3px;
						background-color: #fff;
						// color: #9b9b9b;

						margin-bottom: 6px;
						margin-right: 6px;
						text-align: center;
						line-height: 40px;
						border: solid #d3d3d3 1upx;
						flex: 0 0 calc(33.33% - 6px);
						overflow: hidden;
						font-size: 12px;

						&:nth-child(3n) {
							margin-right: 0;
						}

						&.on {
							background-color: #ff4e1f;
							color: #fff;
						}

						.iconfont {
							color: #9b9b9b;
						}
					}
				}
			}
		}
	}

	.filter {
		width: 100%;
		height: 345px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;

		&.progress {
			height: 190px;
		}

		&.collect {
			height: 230px;
		}

		.menu-box {
			width: 698rpx;
			height: calc(100% - 50px);
			flex-shrink: 1;

			&.filt {
				width: 100%;
			}

			.box {
				width: 100%;
				margin-top: 16px;
				flex-direction: column;
				padding-bottom: 10px;

				.title {
					width: 100%;
					font-size: 13px;
					color: #888;
					margin-bottom: 10upx;
				}

				.labels {
					flex-direction: row;
					flex-wrap: wrap;

					.on {
						border-color: #ff4e1f;
						background-color: #ff4e1f;
						color: #fff;
					}

					&.classify_filter {
						display: flex;
						flex-wrap: wrap;
						text-align: center;

						>view {
							width: 29%;
							margin: 2%;
							height: 80rpx;
							line-height: 80rpx;
							background-color: #f9f9f9;
							border-radius: 5px;
							text-align: center !important;
							display: block;
							font-size: 26upx;
						}

						.on {
							border-color: #ff4e1f;
							background-color: #ff4e1f;
							color: #fff;
						}
					}

					// >view {
					// 	width: 148upx;
					// 	height: 60upx;
					// 	border: solid 1upx #d3d3d3;
					// 	border-radius: 2px;
					// 	margin-right: 15px;
					// 	margin-top: 8px;
					// 	font-size: 12px;
					// 	flex-direction: row;
					// 	justify-content: center;
					// 	align-items: center;

					// 	&:nth-child(4n) {
					// 		margin-right: 0;
					// 	}
					// }
				}

			}
		}

		.price-box {
			display: flex;

			.min,
			.max {
				flex: 1;
				display: unset;
				margin-right: 40upx;
				padding-bottom: 20upx;
				border-bottom: 1upx solid red;
			}

			.tag {
				width: 100%;
				font-size: 13px;
				color: #888;
				margin-bottom: 20upx;
			}

			input {
				width: 100%;
			}
		}

		.btn-box {
			flex-shrink: 0;
			width: 100%;
			height: 50px;
			border-top: 1px solid #E4E7ED;
			flex-direction: row !important;
			align-items: center;
			justify-content: space-between;

			>button {
				flex: 1;
				height: 100upx;
				line-height: 100upx;
				border-radius: 0;
				align-items: center;
				justify-content: center;
				font-size: 15px;

				&.confirm {
					background-color: #ff4e1f;

					&::selection {
						color: red;
					}
				}
			}
		}
	}

	.mask {
		z-index: 10;
		position: fixed;
		top: 120px;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0);
		transition: background-color .15s linear;

		&.show {
			background-color: rgba(0, 0, 0, 0.5);
		}

		&.hide {
			display: none;
		}
	}

	/* 字体图标 */
	// @font-face {
	// 	font-family: "HM-FD-font";
	// 	src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALAAAsAAAAABpQAAAJzAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgp4gQIBNgIkAwwLCAAEIAWEbQc5G8sFERWMIbIfCbbzqA4hp7InSBibVsYGb4J42o82b3e/nJlHMw/NHbGOlwKJRCRpwzPtpAECCOZubdqxjYpQLMlVg+70/08edrgQOtx2ukpVyApZn+dyehPoQObHo3O85rYx9vOjXoBxQIHugW2yIkqIW2QXcScu4jwE8CSWbKSmrqUHFwOaJoCsLM5P4haSGIxRcRHshrUGucLCVcfqI3AZfV/+USguKCwNmtsxVztDxU/n55C+3W0Z4QQpEOTNFqCBbMCAjDUWB9CIwWk87aa70cYgqLkyd3dEmm+18R8eKATEBrV7A5CulBT8dKiWOYZk412XNcDdKSEKSGODnyKIDl+dmVt9/Dx4pu/xyeutkMlHISGPTsPCnoTNP9nOT6wTtDdlO6dPr47efvj942lkYuQzrhMKEjq9N6y98P3340gmlJ/RStUD6F31CAEEPtUW94/7rf+7XgaAz57X0ZHXAGsFFwVgw38yALuMb0IBbVyNamFYEw4oKMDTj3AHRQP5Pt4dci9VwSVkRNQh5r7CLskZadhsWHhRDBsXczk8ZYk3ewnCxmQeQKa3BOHvA8XXO2j+vqRhf7CE+sPmn4anvoL29JLa4qqaUQkmoK+QG2osCckq7txi2leK86aIPyJ3eQZ8xytXYmyQ51jQndJAxIJlqiGSLsOqImiZCjTiZCJt6Lq26U2OoXqwUo0hRaAE0K5AziANy/uLVeXzWyjVqyjcoeupjxDr5MMDn8MDkLG9Aenu5ZrOSSoghAUsRmogkkahSoWAtnlUARnCkY3It0Iu7mWhdmd9Z/19BwBP6GidEi0G56opckXTGZVSPxgAAAA=');
	// }
	@font-face {
		font-family: "HM-FD-font";
		src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMoAAsAAAAABxwAAALZAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqBYIFNATYCJAMQCwoABCAFhG0HPRs0BsgusG3YowCKZblG/A248I8FOyAe+Oye987uPHySFUCVQo0KTFJCRZnz739uc6TZ6xcSFkmmSfPs/p8faiVYyJAysa8jwJbrp83gaCY/j/s8l9O7q4ACmd/Ochtr0Z5+1AswDijQsQZt4QI6QW6pXcSBwSv/1nYCCqqqsdC7M5oKSRHpFxDmudwQkr2QKEbZvCA7MzUKh2Tkk93JOxzUvw//aBnyJDIpMnTQjLYt1H4v9UeQN/18GCcJYQJ3dgYpGiMSZs2mppCFiJ8qyI6iLfLyEn7P/b7mjxDH1smHZfQvjyCRErJIZWHQ2kun/J7jNIHfTzQJf4gVUvghxnw/0x4DfV5lXaBHlFVi7aO0/bxWdv6+cPdRmdlrbzn+qfO6PVN6994+P/v5PWXZ++LdvWUs9gsXP7QrtrfB91P9aflbn1u37JV5vmPHmbH/a+bW/pculdBKpMfTy/pJ27c1d3s3Ha40b4Xnb7c73PMn7hxVM+r+psb222nvS698xqM+qUXITmlvaakgkG5KhgsC6ePkJarZcby5/0ws1vn5QhH8iDY/1tYIZoAvBViBWAWwLpYq4ogxV3N5FYzKghIJClIX6MxR0m9XGMuAawnyyhwI5lRpkcqrTUZeY2QU0hpZed1QUCP9ZhdSyhKyEAugoe0OguIeIlHUK6SKe09G3q/IKOs/ZBUPKQoaEUotWUjdMDvda4XGBm2YcoTZFkWMuTZpUz1Gvg2MVVelBXNcrd0otGjafJjtYoSrK0Ys3fHKsg2DGSsKoa+zGwYBwaIVeWhtCrM2m0W1WbMZc3cqTKVQSOtlBRk2kA1McQRms5AIk8030qPvjyFuK2BYrTAW0nNoZc1tH7TQVHMA2dVHIMav3LLUDlexzAYDZlghIdDX8aKApghYNN/JgywbBbMOJBaqmnmNZkD1heeNIYZboCByVgxJSEMMGdlpW5fTVplG+0he5RqCAAAAAA==') format('woff2')
	}

	.iconfont {
		font-family: "HM-FD-font" !important;
		// font-size: 18px;
		font-style: normal;
		color: #333333;
		margin-top: 5rpx;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;

		&.triangle {
			&:before {
				content: "\e701";
			}
		}

		&.selected {
			&:before {
				content: "\e613";
			}
		}
	}
</style>